<style>

</style>

<div class="row">
    <div class="col-md-12">
        <div>
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="form-group">
                            {{ $buildings[0]->house->name . " > " . $buildings[0]->name }}
                        </div>
                    </div>
                </div>
                <div class="card-body row">
                    @foreach($buildings[0]->rooms as $room)
                        <div class="col-md-3">
                            <div id="metric-card-4irzBtFZ" class="card" style="min-height:165px;">
                                <div class="card-header d-flex justify-content-between align-items-start pb-0">
                                    <div class="metric-header">
                                        <div>
                                            <h4 class="card-title mb-1">101
                                                @if($room->is_rent)
                                                    {!! $room->overdue_time !!}
                                                @else
                                                    <span style="color: blue; font-size: 14px;"> (等待出租) </span>
                                                @endif
                                            </h4>
                                            <div class="metric-header"></div>
                                        </div>
                                    </div>
                                    <div>
                                        @if($room->is_rent)
                                            <a class="btn btn-primary btn-sm" href="{{route('admin.owner.show', ['owner' => $room->owner->id])}}">合同详情</a>
                                            <a class="btn btn-primary btn-sm" href="{{route('admin.running-water.index')}}?room_id={{$room->id}}">未收账单</a>
                                        @endif
                                    </div>
                                </div>
                                <div class="metric-content">
                                    <!-- 数据呈现 -->
                                @if($room->is_rent)
                                    <p style="margin-left: 10px; margin-top: 8px;">合同周期：{{ $room->lease_term }}</p>
                                    <p style="margin-left: 10px; ">合同租金：{{ $room->rent }}</p>
                                    <p style="margin-left: 10px; ">第几期交易：{{ $room->now_cycle . "/" . $room->total_cycle }}</p>
                                @else

                                @endif
                                    <!-- 是否预期未交租，预期多少天 | 离开交租还有多少天 -->

                                    <!-- 当前房间的表读数 -->

                                    <!-- 当前合同处于第几期/总共多少期 -->
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="card-footer">
                    {{ $buildings->links() }}
                </div>
            </div>
        </div>
    </div>


</div>


<script>
    Dcat.ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(".changeHouse").on('change', function () {
            let id = $(this).val();  // 获取房产id
            let url = "/building/" + id + "/house"

            // 获取楼栋列表
            $.ajax({
                url: url,
                method: "get",
                contentType: "application/json",
                data: JSON.stringify({
                    _token: "{{ csrf_token() }}"
                }),
            }).then(function (res) {
                if (res.code === 200) {
                    Dcat.swal.success(res.message).then(function () {
                        location.reload();
                    });
                } else {
                    Dcat.swal.error(res.message, '').then(function () {
                        location.reload();
                    });
                }
            }).catch(function () {

            })

            console.log(val)
        })
    });
</script>